home *** CD-ROM | disk | FTP | other *** search
/ PC World Komputer 2010 April / PCWorld0410.iso / pluginy Firefox / 58606 / 58606.xpi / chrome / translator.jar / content / floatingPanel.js next >
Encoding:
JavaScript  |  2010-02-06  |  2.7 KB  |  145 lines
  1.  
  2. (function(namespace, $)
  3. {
  4.     namespace.FloatingPanel = function(doc)
  5.     {
  6.         this.doc = doc;
  7.     };
  8.     
  9.     namespace.FloatingPanel.prototype = {
  10.         initialized: false,
  11.         doc: null,
  12.         panel: null,
  13.         css: {},
  14.         visible: false,
  15.         
  16.         init: function()
  17.         {
  18.             if(this.initialized) return;
  19.             
  20.             // create panel
  21.             this.createPanel();
  22.             
  23.             this.initialized = true;
  24.         },
  25.         
  26.         uninit: function()
  27.         {
  28.             this.reset();
  29.             
  30.             this.el.remove();
  31.             this.el = null;
  32.             this.elMessage = null;
  33.             this.css = {};
  34.             this.message = '';
  35.             this.visible = false;
  36.             this.initialized = false;
  37.         },
  38.         
  39.         createPanel: function()
  40.         {
  41.             this.panel = $('<div class="translator-floating-panel"></div>', this.doc);
  42.             
  43.             // style panel
  44.             this.panel.css({
  45.                 background: '#D9C6B6',
  46.                 border: '2px #784F2B ridge',
  47.                 bottom: 'auto',
  48.                 cursor: 'pointer',
  49.                 display: 'none',
  50.                 height: 'auto',
  51.                 left: 0,
  52.                 margin: 0,
  53.                 padding: 0,
  54.                 position: 'fixed',
  55.                 right: 'auto',
  56.                 top: 0,
  57.                 width: 'auto',
  58.                 zIndex: 9999999999
  59.             });
  60.             
  61.             // opacity does not work through jQuery css for some reason
  62.             this.panel[0].style.opacity = 0.4;
  63.             
  64.             // add translate button
  65.             var $button = $('<div title="Click to translate"></div>', this.doc).appendTo(this.panel);
  66.             
  67.             // style translate button
  68.             $button.css({
  69.                 background: 'url("chrome://translator/skin/icons.png") top left no-repeat',
  70.                 display: 'block',
  71.                 height: '16px',
  72.                 margin: '2px',
  73.                 width: '16px'
  74.             });
  75.             
  76.             // set hover for floating panel
  77.             this.panel.hover(
  78.                 function(e) {
  79.                     this.panel[0].style.opacity = 1;
  80.                 }.bind(this),
  81.                 function(e) {
  82.                     this.panel[0].style.opacity = 0.4;
  83.                 }.bind(this)
  84.             );
  85.             
  86.             // set click for floating panel
  87.             this.panel.click(function(e) {
  88.                 $(this.doc).trigger('translatorTranslateSelection.translator');
  89.                 
  90.                 this.hide();
  91.                 
  92.                 return false;
  93.             }.bind(this));
  94.             
  95.             $('body', this.doc).append(this.panel);
  96.         },
  97.         
  98.         reloadCss: function()
  99.         {
  100.             this.panel.css({
  101.                 bottom: (this.css.x != undefined ? 'auto' : 0),
  102.                 left: (this.css.x != undefined ? this.css.x : 'auto'),
  103.                 right: (this.css.y != undefined ? 'auto' : 0),
  104.                 top: (this.css.y != undefined ? this.css.y : 'auto')
  105.             });
  106.         },
  107.         
  108.         show: function()
  109.         {
  110.             if(!this.initialized) {
  111.                 this.init();
  112.             }
  113.             
  114.             if(!this.panel) return;
  115.             
  116.             this.reloadCss();
  117.             
  118.             if(!this.visible) {
  119.                 this.visible = true;
  120.                 
  121.                 this.panel.show(250);
  122.             }
  123.         },
  124.         
  125.         hide: function()
  126.         {
  127.             if(!this.panel) return;
  128.             
  129.             this.panel.hide(100);
  130.             
  131.             this.visible = false;
  132.         },
  133.         
  134.         setPosition: function(x, y)
  135.         {
  136.             this.css.x = x + 10;
  137.             this.css.y = y + 10;
  138.         },
  139.         
  140.         resetPosition: function()
  141.         {
  142.             this.css = {};
  143.         }
  144.     };
  145. })(com.igorgladkov.translator, translatorJQuery);